<template>
  <div class="pages-content">
    <myTable :userList="pagesList" v-bind="tableConfig">
      <template v-slot:headerHand>
        <slot name="headerHand">
          <el-button type="primary" @click="handAddClick">添加用户</el-button>
        </slot>
      </template>
      <template #status="scope">
        <el-button
          size="small"
          :type="scope.row.enable || scope.row.status ? 'success' : 'danger'"
        >
          {{ scope.row.enable || scope.row.status ? '启用' : '禁用' }}
        </el-button>
      </template>
      <template v-slot:createT="scope">
        <span>{{ formatUtc(scope.row.createAt) }}</span>
      </template>
      <template #updateT="scope">
        <span>{{ formatUtc(scope.row.updateAt) }}</span>
      </template>
      <template v-slot:hand="scope">
        <div class="hand-btn">
          <el-button
            @click="handEditClick(scope.row)"
            size="small"
            type="primary"
          >
            <el-icon><EditPen /></el-icon>
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handDeleteClick(scope.row)"
          >
            <el-icon><CloseBold /></el-icon>
            删除</el-button
          >
        </div>
      </template>
      <!--      动态渲染插槽-->
      <template
        v-for="slotName in slotNameList"
        :key="slotName.prop"
        v-slot:[`${slotName.slotName}`]="scope"
      >
        <template v-if="slotName.slotName">
          <slot :name="slotName.slotName" :row="scope.row"></slot>
        </template>
      </template>

      <template #footer>
        <div class="footer">
          <el-pagination
            v-model:current-page="pagingConfig.currentPage"
            v-model:page-size="pagingConfig.pageSize"
            :page-sizes="[10, 20, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagesTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </myTable>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import myTable from '@/base-ui/table/my-table.vue'
import { formatUtc } from '@/utils/timm-format'
import { useStore } from 'vuex'
import bus from '@/utils/bus'
export default defineComponent({
  name: 'pages-content',
  props: {
    tableConfig: {
      type: Object,
      require: true
    },
    pagesName: {
      type: String,
      require: true
    }
  },
  components: {
    myTable
  },
  emits: ['emitHandAddClick', 'emitHandEditClick'],
  setup(prop, { emit }) {
    const pagingConfig = ref({
      pageSize: 10,
      currentPage: 1
    })
    const store = useStore()
    store.dispatch('system/getSystemData', {
      pagesName: prop.pagesName,
      configInfo: {
        size: pagingConfig.value.pageSize,
        offset:
          pagingConfig.value.pageSize * (pagingConfig.value.currentPage - 1)
      }
    })

    //监听重置事件
    bus.on('resetTable', () => {
      store.dispatch('system/getSystemData', {
        pagesName: prop.pagesName,
        configInfo: {
          size: 10
        }
      })
    })
    //监听搜索事件
    bus.on('searchTable', (config: any) => {
      store.dispatch('system/getSystemData', {
        pagesName: prop.pagesName,
        configInfo: {
          size: 10,
          ...config
        }
      })
    })
    const pagesList = computed(() =>
      store.getters['system/getListState'](prop.pagesName)
    )
    const pagesTotal = computed(() =>
      store.getters['system/getTotalState'](prop.pagesName)
    )
    //改变一页数据数量
    const handleSizeChange = () => {
      store.dispatch('system/getSystemData', {
        pagesName: prop.pagesName,
        configInfo: {
          size: pagingConfig.value.pageSize,
          offset:
            pagingConfig.value.pageSize * (pagingConfig.value.currentPage - 1)
        }
      })
    }
    //切换页面
    const handleCurrentChange = () => {
      store.dispatch('system/getSystemData', {
        pagesName: prop.pagesName,
        configInfo: {
          size: pagingConfig.value.pageSize,
          offset:
            pagingConfig.value.pageSize * (pagingConfig.value.currentPage - 1)
        }
      })
    }
    //获取其他动态插槽名称
    const slotNameList = prop.tableConfig?.columnList.filter((v: any) => {
      if (v.slotName == 'hand') return false
      if (v.slotName == 'status') return false
      if (v.slotName == 'createT') return false
      if (v.slotName == 'updateT') return false
      return true
    })
    //删除/添加/编辑操作
    const handDeleteClick = (item: any) => {
      store.dispatch('system/deletePageData', {
        pagesName: prop.pagesName,
        id: item.id
      })

      store.dispatch('system/getSystemData', {
        pagesName: prop.pagesName,
        configInfo: {
          size: 10
        }
      })
    }
    const handAddClick = () => {
      emit('emitHandAddClick')
    }
    const handEditClick = (item: any) => {
      emit('emitHandEditClick', item)
    }
    return {
      formatUtc,
      pagesList,
      pagesTotal,
      pagingConfig,
      handleSizeChange,
      handleCurrentChange,
      slotNameList,
      handDeleteClick,
      handAddClick,
      handEditClick
    }
  }
})
</script>

<style lang="less" scoped>
.el-icon {
  padding-right: 5px;
}
.footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
